<template>
  <div style="height:100vh;background:#ebebeb;" >
      <div class="top">
        <van-nav-bar
            fixed
            title="请输入支付密码"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft">
        </van-nav-bar>
      </div>
    <van-password-input
        :style="{padding:'20vw 0'}"
        :value="passsWord"
        :gutter="10"
        :focused="true"
        />
    <van-number-keyboard
        v-model="passsWord"
        :show="true"
        theme="custom"
        maxlength=6
        close-button-text="确认"
        @blur="passsWord=''"
        />
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    name:'toPay',
    data(){
        return{
            show: false, //显示密码输入框
            passsWord:'', //支付密码
            showKeyboard: true, //展示数字键盘
            pay:false, //是否已经支付
        }
    },
    methods:{
         paySuccess(){
            this.pay = true;
            this.axios({
                url:'/order/order_detail',
                params:{
                name:this.name,
                phone:this.tel,
                room_num:this.roomNum,
                people_num:this.peopleNum,
                hotel_title:this.orderInfo.hotelTitle,
                room_type:this.orderInfo.roomInfo.type,
                room_img:this.orderInfo.roomInfo.img,
                room_prcie:this.orderInfo.roomInfo.price,
                check_in:this.orderInfo.dateStart._d,             
                leave:this.orderInfo.dateEnd._d,             
                oid:'1',
                }
            }).then(res => {
                if(res.data.code == 200){
                    this.$router.push(`/hotel?id=${this.orderInfo.id}`)
                }else{
                console.log(new Error('error'))
                }
            })
            },
        ifPay(){
        if(this.pay) return;
        
        Dialog.confirm({
            message: '是否放弃支付',
        })
        .then(() => {
            this.axios({
            url:'/order/order_detail',
            params:{
                name:this.name,
                phone:this.tel,
                room_num:this.roomNum,
                people_num:this.peopleNum,
                hotel_title:this.orderInfo.hotelTitle,
                room_type:this.orderInfo.roomInfo.type,
                room_img:this.orderInfo.roomInfo.img,
                room_prcie:this.orderInfo.roomInfo.price * this.roomNum,
                check_in:this.orderInfo.dateStart._d,             
                leave:this.orderInfo.dateEnd._d,             
                oid:'0',
            }
            }).then(res => {
            if(res.data.code == 200){
                this.$router.push(`/hotel?id=${this.orderInfo.id}`)
            }else{
                console.log(new Error('error'))
            }
            })
        })
        .catch(() => {
            console.log('继续支付')
        });
        },
    },
    mounted(){
        this.orderInfo = this.$store.state.hotel;
    },

}
</script>

<style lang="scss" scoped>
.top {
  height: 13vw;
  .van-nav-bar {
    background-color: #f5b400;

    color: #fff;
    ::v-deep .van-nav-bar__text {
      color: #fff;
    }
    ::v-deep .van-nav-bar__title {
      color: #fff;
    }
    ::v-deep .van-icon {
      color: #fff;
    }
  }
}

</style>